<template>
  <div class="mod-user">
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        class="search-form"
        ref="searchForm"
        :model="searchForm"
        size="small"
      >
        <div class="input-row">
          <el-form-item
            prop="nickName"
            :label="$t('users.name') + ':'"
          >
            <el-input
              v-model="searchForm.nickName"
              type="text"
              clearable
              :placeholder="$t('users.name')"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="userMobile"
            :label="$t('publics.mobilePhone') + ':'"
          >
            <el-input
              v-model="searchForm.userMobile"
              type="text"
              clearable
              maxlength="11"
              :placeholder="$t('publics.mobilePhone')"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item prop="levelType" :label="$t('user.memberType') + ':'">
            <el-cascader
              ref="memberCascader"
              v-model="memberLevelVal"
              :options="levelTypes"
              :props="{ checkStrictly: true }"
              clearable
              @change="handleMemberTypeChange"
            />
          </el-form-item> -->
          <el-form-item
            prop="status"
            :label="$t('publics.status') + ':'"
          >
            <el-select
              v-model="searchForm.status"
              clearable
              :placeholder="$t('publics.status')"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('user.registrationTime') + ':'">
            <el-date-picker
              size="small"
              v-model="createDateRange"
              type="datetimerange"
              :range-separator="$t('date.tip')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('text.startTime')"
              :end-placeholder="$t('date.end')"
              @change="createTimeChange"
            ></el-date-picker>
          </el-form-item>
          <!-- 会员标签 -->
          <!-- <el-form-item :label="$t('user.userTag')+':'" prop="userTag">
            <el-select
              value-key="userTagId"
              v-model="searchForm.userTag"
              v-el-select-loadmore="loadmore"
              multiple
              clearable
              collapse-tags
              :placeholder="$t('user.userTagDefaultTxt')"
            >
              <el-option
                v-for="item in tagList"
                :key="item.userTagId"
                :label="item.tagName"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item style="float: right">
            <div
              class="default-btn primary-btn"
              @click="searchChange(true)"
            >
              {{ $t("crud.searchBtn") }}
            </div>
            <div
              class="default-btn"
              @click="resetForm('searchForm')"
            >
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="operation-bar">
        <div
          v-if="isAuth('platform:user:updateGrowth')"
          class="primary-btn default-btn"
          :class="{ 'disabled-btn': dataListSelections.length <= 0 }"
          @click="updateGrowth()"
        >
          {{ $t("user.updateGrowth") }}
        </div>
        <!-- <div
          class="primary-btn default-btn"
          @click="updateTags()"
          :class="{ 'disabled-btn': dataListSelections.length <= 0 }"
        >
          {{ $t("user.tagging") }}
        </div> -->
        <!-- <div
            v-if="isAuth('user:userLevel:updateScore')"
            class="primary-btn default-btn"
            @click="updateScore()"
            :class="{'disabled-btn': dataListSelections.length <= 0}"
          >{{$t('user.updateScore')}}</div> -->
        <div
          v-if="isAuth('platform:coupon:sendUserCoupon')"
          class="primary-btn default-btn"
          @click="updateCoupon()"
          :class="{ 'disabled-btn': dataListSelections.length <= 0 }"
        >
          {{ $t("user.sendCoupons") }}
        </div>
        <div
          class="primary-btn default-btn"
          @click="updateBalance(null, 1)"
          :class="{ 'disabled-btn': dataListSelections.length <= 0 }"
        >
          {{ $t("user.batchModifyBalance") }}
        </div>
        <div
          v-if="isAuth('platform:staff:import')"
          class="primary-btn default-btn"
          @click="importUser()"
          :disabled="importDisabled"
        >
          {{ $t("user.workUserImport") }}
        </div>
        <div
          v-if="isAuth('platform:user:exportUser')"
          class="primary-btn default-btn"
          @click="exportUser()"
          :disabled="exportDisabled"
        >
          {{ $t("user.exportWorker") }}
        </div>
        <div
          v-if="isAuth('platform:staff:import')"
          class="primary-btn default-btn"
          @click="addUser()"
        >
          {{ $t("user.addWorker") }}
        </div>
      </div>
      <div class="table-con">
        <div
          v-if="dataList.length === 0"
          class="empty-text"
        >
          {{ $t("user.noData") }}
        </div>
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column
            fixed
            type="selection"
            width="60"
          > </el-table-column>
          <el-table-column
            fixed
            :label="$t('users.name')"
            prop="nickName"
            align="left"
            width="120"
          />
          <el-table-column
            fixed
            prop="pic"
            :label="$t('publics.profilePicture')"
          >
            <template slot-scope="scope">
              <div class="table-cell-image">
                <img
                  src="~@/assets/img/userImg.jpg"
                  v-if="!scope.row.pic"
                  width="130px"
                />
                <img
                  :src="scope.row.pic"
                  v-else
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="userMobile"
            width="120"
            :label="$t('publics.userMobilePhone')"
          />
          <el-table-column
            prop="authPhone"
            width="120"
            :label="$t('publics.employeeMobilePhone')"
          />
          <!-- <el-table-column
              prop="levelName"
              width="120"
              :label="$t('user.membershipLevel')"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.levelName">
                  {{scope.row.levelName}}
                </span>
                <span v-else>
                  --
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="levelType"
              width="120"
              :label="$t('user.memberType')"
            >
              <template slot-scope="scope">
                <span>{{[$t('user.ordinaryMember'),$t('user.paidMembership')][scope.row.levelType]}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="growth"
              width="120"
              :label="$t('user.growth')"
            /> -->
          <el-table-column
            prop="status"
            width="120"
            :label="$t('publics.status')"
          >
            <template slot-scope="scope">
              <span>{{
                [$t("publics.disable"), $t("publics.normal")][scope.row.status]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            prop="userRegtime"
            :label="$t('user.registrationTime')"
          />
          <el-table-column
            width="150"
            prop="reConsTime"
            :label="$t('user.lastConsumptionTime')"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.reConsTime">
                {{ scope.row.reConsTime }}
              </span>
              <span v-else> -- </span>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="consAmount"
            :label="$t('user.consumptionAmount')"
          />
          <el-table-column
            width="120"
            prop="actualAmount"
            :label="$t('user.actuallypaid')"
          />
          <el-table-column
            width="120"
            prop="consTimes"
            :label="$t('user.consumptionTimes')"
          />
          <el-table-column
            width="120"
            prop="averDiscount"
            :label="$t('user.averageDiscount')"
          />
          <el-table-column
            width="120"
            prop="rechargeAmount"
            :label="$t('user.rechargeAmount')"
          />
          <el-table-column
            width="120"
            prop="rechargeTimes"
            :label="$t('user.rechargeTimes')"
          />
          <el-table-column
            width="120"
            prop="afterSaleAmount"
            :label="$t('home.refundAmount')"
          />
          <el-table-column
            width="120"
            prop="afterSaleTimes"
            :label="$t('user.refundTimes')"
          />
          <el-table-column
            width="120"
            prop="currentBalance"
            :label="$t('user.currentBalance')"
          />
          <el-table-column
            width="120"
            prop="sumBalance"
            :label="$t('user.cumulativeBalances')"
          />
          <el-table-column
            fixed="right"
            align="center"
            :label="$t('crud.menu')"
            width="230"
          >
            <template slot-scope="scope">
              <div class="text-btn-con">
                <div
                  class="text-btn default-btn"
                  @click.stop="addOrUpdateHandle(scope.row.userId)"
                >
                  {{ $t("prodList.lookOver") }}
                </div>
                <div
                  class="default-btn text-btn"
                  @click.stop="
                    updateBalance(scope.row.userId, 0, scope.row.currentBalance)
                  "
                >
                  {{ $t("user.modifyBalance") }}
                </div>
              </div>
            </template>
          </el-table-column>

          <div slot="empty">&nbsp;</div>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="refreshChange"
    ></add-or-update>
    <update-growth
      v-if="updateGrowthVisible"
      ref="updateGrowth"
      @refreshDataList="refreshChange"
    ></update-growth>
    <!-- <update-score v-if="updateScoreVisible" ref="updateScore" @refreshDataList="refreshChange"></update-score> -->
    <update-tags
      v-if="updateTagsVisible"
      ref="updateTags"
      @refreshDataList="refreshChange"
    ></update-tags>
    <update-balance
      v-if="updateBalanceVisible"
      ref="updateBalance"
      @refreshDataList="refreshChange"
    ></update-balance>
    <update-coupon
      v-if="updateCouponVisible"
      ref="updateCoupon"
      :getWay="1"
      @refreshDataList="refreshChange"
    ></update-coupon>
    <import-user
      :isWorking="true"
      v-if="importUserVisible"
      ref="importUser"
      @refreshDataList="refreshChange"
    ></import-user>
    <AddUserOrStaff
      ref="AddUserOrStaff"
      @refresh="refreshChange"
      :isWorking="true"
    />
  </div>
</template>

<script>
import AddOrUpdate from "./user-add-or-update";
import UpdateGrowth from "./update-user-growth";
// import UpdateScore from './update-user-score'
import UpdateTags from "./update-user-tags";
import UpdateBalance from "./update-user-balance";
import UpdateCoupon from "./update-user-copon";
import ImportUser from "./excel-user-import";
import AddUserOrStaff from "./add-user-or-staff.vue"
export default {
  directives: {
    "el-select-loadmore": {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight + 0.5;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  data() {
    return {
      theData: null, // 保存上次点击查询的请求条件

      dataList: [],
      dataListLoading: false,
      exportDisabled: false,
      importDisabled: false,
      updateBalanceVisible: false,
      updateCouponVisible: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      updateGrowthVisible: false,
      // updateScoreVisible: false,
      updateTagsVisible: false,
      importUserVisible: false,
      createDateRange: [], // 注册时间范围
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      searchForm: {
        userTag: [
          {
            userTagId: 188,
            tagName: "员工",
            tagType: 0,
            isSysTurnOn: 0,
            registerMinTime: null,
            registerMaxTime: null,
            subscribeMinTime: null,
            subscribeMaxTime: null,
            toBeMemberMinTime: null,
            toBeMemberMaxTime: null,
            recentPurchaseTime: null,
            purchaseNumTime: null,
            purchaseNumMinNum: null,
            purchaseNumMaxNum: null,
            purchaseAmountTime: null,
            purchaseAmountMinAmount: null,
            purchaseAmountMaxAmount: null,
            orderAveragePriceTime: null,
            orderAveragePriceMinAmount: null,
            orderAveragePriceMaxAmount: null,
            rechargeAmountTime: null,
            rechargeAmountMinAmount: null,
            rechargeAmountMaxAmount: null,
            rechargeNumTime: null,
            rechargeNumMinNum: null,
            rechargeNumMaxNum: null,
            userNum: 2,
            createTime: "2023-08-01 15:49:29",
            updateTime: "2023-08-01 17:27:11",
            statisticUpdateTime: null,
            tagCategory: null,
            brandId: 0,
            shopId: 0,
          },
        ],
        nickName: "",
        userMobile: "",
        levelType: "",
        // 会员等级
        level: "",
        status: null,
        userRegStartTime: null, // 注册起始时间
        userRegEndTime: null, // 注册结束时间
      },
      levelTypes: [
        {
          label: this.$i18n.t("user.ordinaryMember"),
          value: 0,
          children: [],
        },
        {
          label: this.$i18n.t("user.paidMembership"),
          value: 1,
          children: [],
        },
      ],
      memberLevelVal: "",
      status: [
        {
          label: this.$i18n.t("publics.disable"),
          value: 0,
        },
        {
          label: this.$i18n.t("publics.normal"),
          value: 1,
        },
      ],
      // 会员标签列表
      tagList: [],
      tagTotal: 0,
      tagSearchParam: {
        size: 10,
        current: 1,
      },
    };
  },
  components: {
    AddOrUpdate,
    UpdateGrowth,
    // UpdateScore,
    UpdateTags,
    UpdateCoupon,
    ImportUser,
    UpdateBalance,
    AddUserOrStaff
  },
  mounted() {
    this.getMemberLevelList();
    this.searchChange(true);
    this.getMemberTags();
  },
  methods: {
    addUser() {
      this.$refs.AddUserOrStaff.open();
    },
    /**
     * 切换付费会员等级
     */
    handleMemberTypeChange(val) {
      this.searchForm.levelType = val[0];
      this.searchForm.level = val[1] || "";
      this.$refs.memberCascader.dropDownVisible = false;
    },
    /**
     * 获取会员等级列表
     */
    getMemberLevelList() {
      for (let index = 0; index < 2; index++) {
        this.$http({
          url: this.$http.adornUrl("/user/userLevel/list"),
          method: "get",
          params: this.$http.adornParams({
            userLevelType: index,
          }),
        }).then(({ data }) => {
          const children = [];
          data.forEach((el) => {
            children.push({
              value: el.level,
              label: el.levelName,
            });
          });
          this.levelTypes[index].children = children;
        });
      }
    },
    // 获取数据列表  /admin/user/page
    getDataList(page, newData = false) {
      if (newData || !this.theData) {
        this.theData = JSON.parse(JSON.stringify(this.searchForm));
      }
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/admin/user/userPage"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize,
            },
            this.theData
          )
        ),
      }).then(({ data }) => {
        this.dataList = data.records;
        this.page.total = data.total;
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 条件查询 JSON.stringify(arr)
    searchChange(newData = false) {
      var arr = "";
      if (this.searchForm.userTag.length !== 0) {
        this.searchForm.userTag.forEach((item) => {
          arr = arr + item.userTagId + ",";
        });
      }
      this.searchForm.tagIds = arr;
      this.page.currentPage = 1;
      this.getDataList(this.page, newData);
    },
    // 刷新回调用
    refreshChange() {
      this.getDataList(this.page);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = {
        userTag: [
          {
            userTagId: 188,
            tagName: "员工",
            tagType: 0,
            isSysTurnOn: 0,
            registerMinTime: null,
            registerMaxTime: null,
            subscribeMinTime: null,
            subscribeMaxTime: null,
            toBeMemberMinTime: null,
            toBeMemberMaxTime: null,
            recentPurchaseTime: null,
            purchaseNumTime: null,
            purchaseNumMinNum: null,
            purchaseNumMaxNum: null,
            purchaseAmountTime: null,
            purchaseAmountMinAmount: null,
            purchaseAmountMaxAmount: null,
            orderAveragePriceTime: null,
            orderAveragePriceMinAmount: null,
            orderAveragePriceMaxAmount: null,
            rechargeAmountTime: null,
            rechargeAmountMinAmount: null,
            rechargeAmountMaxAmount: null,
            rechargeNumTime: null,
            rechargeNumMinNum: null,
            rechargeNumMaxNum: null,
            userNum: 2,
            createTime: "2023-08-01 15:49:29",
            updateTime: "2023-08-01 17:27:11",
            statisticUpdateTime: null,
            tagCategory: null,
            brandId: 0,
            shopId: 0,
          },
        ],
        nickName: "",
        userMobile: "",
        levelType: "",
        // 会员等级
        level: "",
        status: null,
        userRegStartTime: null, // 注册起始时间
        userRegEndTime: null, // 注册结束时间
      }
      this.memberLevelVal = null;
      this.createDateRange = [];
    },
    createTimeChange() {
      if (!this.createDateRange || this.createDateRange.length === 0) {
        this.searchForm.userRegStartTime = null;
        this.searchForm.userRegEndTime = null;
      } else {
        this.searchForm.userRegStartTime = this.createDateRange[0];
        this.searchForm.userRegEndTime = this.createDateRange[1];
      }
    },
    // 多选变化
    selectionChange(val) {
      this.dataListSelections = val;
    },
    // 修改成长值
    updateGrowth(id) {
      if (this.dataListSelections.length <= 0) {
        return;
      }
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
          return item.userId;
        });
      // console.log(ids)
      this.updateGrowthVisible = true;
      this.$nextTick(() => {
        this.$refs.updateGrowth.init(ids);
      });
    },
    // 修改积分值
    /* updateScore (id) {
      if (this.dataListSelections.length <= 0) {
        return
      }
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.userId
      })
      // console.log(ids)
      this.updateScoreVisible = true
      this.$nextTick(() => {
        this.$refs.updateScore.init(ids)
      })
    }, */
    updateTags(id) {
      if (this.dataListSelections.length <= 0) {
        return;
      }
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
          return item.userId;
        });
      // console.log(ids)
      this.updateTagsVisible = true;
      this.$nextTick(() => {
        this.$refs.updateTags.init(ids);
      });
    },
    // type 1 批次充值 0修改金豆
    updateBalance(id, type, balance) {
      if (this.dataListSelections.length <= 0 && type) {
        return;
      }
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
          return item.userId;
        });
      // console.log(ids)
      this.updateBalanceVisible = true;
      this.$nextTick(() => {
        this.$refs.updateBalance.init(ids, type, balance);
      });
    },
    updateCoupon(id) {
      if (this.dataListSelections.length <= 0) {
        return;
      }
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
          return item.userId;
        });
      // console.log(ids)
      this.updateCouponVisible = true;
      this.$nextTick(() => {
        this.$refs.updateCoupon.init(ids);
      });
    },

    //  选择指定列进行排序
    changeTableSort(column) {
      // 获取字段名称和排序类型
      var fieldName = column.prop;
      var sortingType = column.order;
      this.searchForm.fieldName = fieldName;
      this.searchForm.sortingType = sortingType;
      this.$set(this.page, this.page);
      this.getDataList(this.page);
    },
    /**
     * 导入用户
     */
    importUser() {
      this.importUserVisible = true;
      this.$nextTick(() => {
        this.$refs.importUser.init();
      });
    },
    /**
     * 导出单品
     */
    exportUser() {
      this.exportDisabled = true;
      const loading = this.$loading({
        lock: true,
        target: ".table-con",
        customClass: "export-load",
        background: "transparent",
        text: this.$i18n.t("shop.exportIng"),
      });
      this.$http({
        url: this.$http.adornUrl("/admin/user/exportUser"),
        method: "get",
        params: this.$http.adornParams(this.searchForm),
        responseType: "blob", // 解决文件下载乱码问题
      })
        .then(({ data }) => {
          loading.close();
          this.exportDisabled = false;
          var blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          });
          const fileName = this.$i18n.t("user.userInformationForm");
          const elink = document.createElement("a");
          if ("download" in elink) {
            // 非IE下载
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((e) => {
          loading.close();
        });
    },
    /**
     * 获取会员标签列表
     */
    getMemberTags() {
      this.$http({
        url: this.$http.adornUrl("/user/userTag/byTagType"),
        method: "get",
        params: this.$http.adornParams(this.tagSearchParam),
      }).then(({ data }) => {
        if (!data) return;
        this.tagTotal = data.total;
        this.tagList = [...this.tagList, ...data.records];
      });
    },
    loadmore() {
      this.tagSearchParam.current++;
      if (this.tagList.length < this.tagTotal) {
        this.getMemberTags();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mod-user {
  .tips .text {
    color: #ff0000;
  }
  ::v-deep .el-table__fixed {
    height: auto !important;
    bottom: 16px !important;
    &::before {
      background-color: transparent !important;
    }
  }
  ::v-deep .el-table__fixed-right {
    height: auto !important;
    bottom: 16px !important;
    &::before {
      background-color: transparent !important;
    }
  }
}
.TagS {
  margin-right: 10px !important;
}

.table-con {
  position: relative;
}

.empty-text {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  color: #909399;
}
::v-deep .export-load {
  top: -50% !important;
}
::v-deep
  .el-select
  .el-select__tags
  > span
  > .el-tag.el-tag--info:nth-last-child(2) {
  max-width: 120px;
}
</style>
